<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>div{width:200px;height:200px;background-color: #ccc;display: none;}</style>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(ev){
                var oEvent=ev||event;//oEvent是事件对象
                oDiv.style.display='block';
                //alert('按钮被点击了');测试使用
//                取消冒泡
                oEvent.cancelBubble=true;//cancelBubble是oEvent事件对象事件的属性

            };
           document.onclick=function(){
             oDiv.style.display='none';
               //alert('document被点击了');
           };
        };
    </script>
</head>
<body>
<input type="button" value="点击" id="btn1">
<div id="div1"></div>
</body>
</html>